<template>
	<!-- 表格封装 -->
	<div class="common_table" >
		<el-table :data="tableData" height="300px" stripe v-loading="config.loading">
			<el-table-column label="序号" width="85">
			      <template slot-scope="scope">
			        <span style="margin-left: 10px">{{ (config.page-1)*20+scope.$index+1 }}</span>
			      </template> 
			    </el-table-column>
				<!-- key的作用使代码不复用 -->
			<el-table-column show-overflow-tooltip stripe  v-for="item in tableLabel" :key="item.prop" :label="item.label" :width="item.width ? item.width :125">
			      <template slot-scope="scope"> 
			        <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
			      </template>
			    </el-table-column>
			<!-- 操作页面 -->
			<el-table-column label="操作" width="180">
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.row)">修改</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.row)">删除</el-button>
			      </template>
			    </el-table-column>		
		</el-table>
		<!-- 分页操作  -->
		<el-pagination
			class="fenye"
		    layout="prev, pager, next"
		    :total="config.total"
			:current-page.sync="config.page"
			@current-change="changePage">
		  </el-pagination>
	</div>
</template>

<script>
	export default{
		//接受父组件的数据
		props:{
			tableData:Array,
			tableLabel:Array,
			//分页配置
			config:Object
		},
		methods: {
			//编辑操作
			handleEdit(row) {
				// 向父组件发送数据，父组件进行监听
				this.$emit('edit',row)
			},
			// 删除操作
			handleDelete(row){
				// 向父组件发送数据，父组件进行监听
				this.$emit('del',row)
			}, 
			changePage(page){
				//向父组件发送数据
				this.$emit('changePage',page)
			}		
		},
	}
</script> 

<style lang="scss" scoped="scoped">
	.common_table{
		background-color: #FFFFFF;
		.fenye{
			text-align: center;
		}
	}
	
</style>
<style>
	.el-table .cell{
		padding-right: 20px !important;
		text-align: center !important;
	}
	.el-table td, .el-table th{
		text-align: center !important;
	}
</style>
